<template>
  <view class="login-container">
    <view class="login-box">
      <view class="title">图书管理系统</view>
      <u-form :model="loginForm" ref="loginFormRef">
        <u-form-item label="用户名" prop="username">
          <u-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            :border="true"
          />
        </u-form-item>
        <u-form-item label="密码" prop="password">
          <u-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            :border="true"
          />
        </u-form-item>
      </u-form>
      <view class="btn-group">
        <u-button type="primary" @click="handleLogin" :loading="loading">
          登录
        </u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const loginFormRef = ref(null);
const loading = ref(false);

const loginForm = reactive({
  username: '',
  password: ''
});

const handleLogin = async () => {
  try {
    loading.value = true;
    await userStore.loginAction(loginForm);
    await userStore.getUserInfoAction();
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }, 1500);
  } catch (error) {
    console.error('登录失败:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  
  .login-box {
    width: 80%;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 40rpx;
      color: #333;
    }
    
    .btn-group {
      margin-top: 40rpx;
    }
  }
}
</style> 